<!DOCTYPE HTML>
<html>

<head>
    <title>店铺等级管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container">
    <div class="detail-page">
        <div class="detail-page-title">
            <h4>店铺等级管理
                <button type="button" id="add-level-btn" class="pull-right jx-btn btn-default">新增店铺等级</button>
            </h4>
        </div>
        <div class="detail-section">
            <div class="detail-row">
                <!-- 表格 start-->
                <div id="grid"></div>
                <div></div>
                <div></div>
                <!-- 表格 end-->
            </div>
        </div>
    </div>
</div>
<!-- 初始隐藏 dialog内容 -->
<div id="content" class="hide">
    <form class="form-horizontal jx-form">
        <div class="row">
            <div class="control-group span10">
                <label class="control-label">等级编码：</label>
                <div class="controls">
                    <input id="level" name="c" type="text" data-rules="{required:true}"
                           class="input-normal control-text">
                    <!--    <label  name="c" class="control-label"></label>-->
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span10">
                <label class="control-label">等级名称：</label>
                <div class="controls">
                    <input name="b" type="text" data-rules="{required:true}"
                           class="input-normal control-text">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span10">
                <label class="control-label">付费金额：</label>
                <div class="controls">
                    <input name="d" type="text" data-rules="{required:true}"
                           class="input-normal control-text">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span10">
                <label class="control-label v-top">等级描述：</label>
                <div class="controls">
                    <textarea class="input-large"></textarea>
                </div>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
<script type="text/javascript" src="../../../assets/js/config-min.js"></script>
<script type="text/javascript">
    BUI.use('common/page');
</script>
<!-- script start -->
<script type="text/javascript">
    BUI.use(['bui/grid', 'bui/data', 'common/search'], function (Grid, Data, Search) {
        var Grid = Grid,
            Store = Data.Store,
            columns = [{
                title: '序号',
                dataIndex: 'a',
                elCls: 'center', //居中
                width: 100
            }, {
                id: '123',
                title: '等级名称 ',
                elCls: 'center',
                dataIndex: 'b',
                width: 100
            }, {
                title: '等级编码',
                elCls: 'center',
                dataIndex: 'c',
                width: 200
            }, {
                title: '付费金额／年',
                elCls: 'center',
                dataIndex: 'd',
                width: 200
            }, {
                title: '操作',
                dataIndex: 'e',
                elCls: 'center',
                width: 200,
                renderer: function (value, obj) {
                    var editStr = Search.createLink({ //链接使用 此方式
                            id: 'edit' + obj.id,
                            title: '添加功能',
                            text: '<span class="grid-command btn-add">[ 添加功能 ]</span> ',
                            href: 'templates/supplier/supplier-level/supplier-add-fun.html'
                        }),
                        offStr = '<span class="grid-command btn-edit">[ 编辑 ]</span>'; //页面操作不需要使用Search.createLink
                    return offStr + editStr;
                }
            }],
            data = [{
                id: '1222',
                a: '001',
                b: '免费版',
                c: 'A',
                d: '0.00'
            }, {
                id: '1222',
                a: '002',
                b: '标准版',
                c: 'B',
                d: '2999.00'
            }];

        //初始化数据
        //实例化 Grid.Plugins.DialogEditing表格编辑
        var isAddRemote = false,
            editing = new Grid.Plugins.DialogEditing({
                contentId: 'content', //设置隐藏的Dialog内容
                triggerCls: 'btn-edit', //触发显示Dialog的样式
                editor: {
                    title: '编辑商品品牌'
                }
            }),
            store = new Store({ //初始化数据
                data: data,
                autoLoad: true, //自动加载数据
                pageSize: 2 // 配置分页数目
            }),
            grid = new Grid.Grid({
                render: '#grid',
                elCls: 'small-bui-grid-table',
                columns: columns,
                loadMask: true, //加载数据时显示屏蔽层
                forceFit: true,
                // 底部工具栏
                bbar: {
                    // pagingBar:表明包含分页栏
                    pagingBar: true
                },
                plugins: [editing], //插件
                store: store
            });

        grid.render();

        //点击操作
        grid.on('itemclick', function (ev) {
            var sender = $(ev.domTarget),
                itemEl = $(ev.element),
                item = ev.item;

            if (sender.hasClass('btn-edit')) { //点击编辑操作
                $("#level").attr("disabled", true);
            } else if (sender.hasClass('btn-add')) { //点击编辑操作

            }

        });
        //点击添加分类按钮
        $("#add-level-btn").click(function () {
            $("#level").attr("disabled", false);
            addFunction();
        });
        //添加记录
        function addFunction() {
            var newData = {};
            editing.add(newData, 'a'); //添加记录后，直接编辑
        }
    });
</script>
<!-- script end -->

<body>

</html>
